<template>
  <div>
    <input type="text" v-model="valA">
    <select v-model="selectType">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model="valB">
    <input type="button" value="=" @click="calc">
    <span v-text="result"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      valA: "",
      valB: "",
      selectType: "+",
      result: ""
    }
  },
  methods: {
    calc() {
      let valA = Number.parseInt(this.valA)
      let valB = Number.parseInt(this.valB)
      switch (this.selectType) {
        case "+":
          this.result  = valA + valB
          break;
        case "-":
          this.result  = valA - valB
          break;
        case "*":
          this.result  = valA * valB
          break;
        case "/":
          this.result  = valA / valB
          break;
      }
    },
  }
}
</script>

<style scoped>

</style>
